<template>
  <div class="add-user">
    <Header :left-arrow="true" :title="$route.query.title"/>
    <van-form ref="addUserForm" @submit="onSubmit">
      <van-field
        v-model="userDatas.username"
        :rules="[
          {
            uPattern,
            required: true,
            message: '1、不能有特殊字符和数字;2、可以输入英文，可以有空格，可以输入英文名字中的点;3、可以输入汉字;4、中文英文不能同时出现;5、长度在1-20;'
          }
        ]"
        name="username"
        label="姓名"
        placeholder="请填写姓名"
      />
      <van-field
        :rules="[
          {
            required: true,
          }
        ]"
        name="gender"
        label="单选框">
        <template #input>
          <van-radio-group v-model="userDatas.gender" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="userDatas.phone"
        :rules="[
          {
            phoneReg,
            required: true,
            message: '请填写正确的手机号'
          }
        ]"
        name="phone"
        label="手机号"
        placeholder="请填写手机号"
      />
      <van-field
        v-if="$route.query.isShowTag === 'true'"
        v-model="userDatas.balance"
        :rules="[
          {
            isNumberReg,
            required: true,
            message: '请填写数字'
          }
        ]"
        name="balance"
        label="余额"
        placeholder="请填写余额"
      />
      <van-field
        v-if="$route.query.isShowTag === 'true'"
        v-model="userDatas.monetary"
        :rules="[
          {
            isNumberReg,
            required: true,
            message: '请填写数字'
          }
        ]"
        name="monetary"
        label="消费金额"
        placeholder="请填写消费金额"
      />
      <van-field
        v-if="$route.query.isShowTag === 'false'"
        v-model="userDatas.income"
        :rules="[
          {
            isNumberReg,
            required: true,
            message: '请填写数字'
          }
        ]"
        name="income"
        label="收入金额"
        placeholder="请填写收入金额"
      />

      <div style="margin: 16px;">
        <van-button :disabled="$route.query.isForbidden === 'true'" round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { uPattern, phoneReg, isNumberReg } from './../../utils/validation_rule'
import Header from './../../components/Header/Header'

export default {
  name: 'AddUser',
  components: {
    Header
  },
  data() {
    return {
      userDatas: {
        username: '', // 用户名
        gender: '1', // 性别
        phone: '', // 手机号
        balance: '', // 余额
        monetary: '', // 消费金额
        income: '' // 收入金额
      },
      uPattern, // 用户名验证规则
      phoneReg, // 手机号验证规则
      isNumberReg
    }
  },
  mounted() {
    // this.$refs.addUserForm.resetValidation()
    // console.log(this.$route.query)
  },
  activated() {
    this.userDatas = {
      username: '', // 用户名
      gender: '1', // 性别
      phone: '', // 手机号
      balance: '', // 余额
      monetary: '', // 消费金额
      income: '' // 收入金额
    }
    /**
     * 重置表单验证规则
     */
    this.$refs.addUserForm.resetValidation()
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
